

<template>
  <div class="question-container">
    <div class="search" v-show="isShowSearch">
      <span>题目内容 </span>
      <el-input placeholder="请输入题目内容" v-model="questionContent"/>
      <span>题目类型 </span>
      <el-select placeholder="请选择题目类型" v-model="qtype">
        <el-option  v-for="item in questionType" :value="item.value" :label="item.label"/>
      </el-select>
      <span>所属题库 </span>
      <el-select  placeholder="请选择所属题库" v-model="bankId">
        <el-option  v-for="item in bankList" :value="item.key" :label="item.value"/>
      </el-select>
      <el-button class="el-button__primary" type="primary" @click="pageQuestionList">
        <template #icon>
          <el-icon>
            <Search/>
          </el-icon>
        </template>
        查询
      </el-button>
      <el-button class="el-button__default" @click="refresh">
        <template #icon>
          <el-icon>
            <Refresh/>
          </el-icon>
        </template>
        重置
      </el-button>
    </div>
    <!--  操作按钮-->
    <div class="operation">
      <div class="float_left">
        <el-button class="el-button__primary" type="primary" @click="store.setQuestionInsertOpen(true)">
          <template #icon>
            <svg-icon icon-class="add"/>
          </template>
          新增
        </el-button>
        <el-button :class="selectedIds.length!==0?'el-button__plain':'el-button__plain__disabled'"  @click="deleteQuestionBatch()" :disabled="selectedIds.length===0">
          <template #icon>
            <el-icon><Delete/></el-icon>
          </template>
          删除
        </el-button>
      </div>
      <div class="float_right">
        <el-tooltip :content="isShowSearch?'隐藏搜索':'显示搜索'" placement="top">
          <el-button circle @click="isShowSearch=!isShowSearch">
            <template #icon>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-button>
        </el-tooltip>
        <el-tooltip content="刷新" placement="top">
          <el-button circle @click="refresh">
            <template #icon>
              <el-icon>
                <Refresh/>
              </el-icon>
            </template>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-table
        row-key="id"
        border
        :data="questionList"
        class="user-table"
        :header-cell-class-name="'table-header'"
        :cell-class-name="'cell'"
        highlight-current-row
        default-expand-all
        fit
        v-loading="isLoading"
        label="use show-overflow-tooltip"
        @selection-change="handleSelectionChange"
        show-overflow-tooltip
    >
      <el-table-column type="selection"  width="65"/>
      <el-table-column label="#" prop="id" width="200px">
      </el-table-column>
      <el-table-column label="题目类型" prop="questionType">
        <template #default="scope">
          <el-tag v-if="scope.row.questionType === 'single'" type="primary" effect="plain">单选题</el-tag>
          <el-tag v-else-if="scope.row.questionType === 'multiple'" type="danger" effect="plain">多选题</el-tag>
          <el-tag v-else-if="scope.row.questionType === 'judgment'" type="info" effect="plain">判断题</el-tag>
          <el-tag v-else-if="scope.row.questionType === 'fill'" type="success" effect="plain" >填空题</el-tag>
          <el-tag v-else-if="scope.row.questionType === 'essay'" type="warning" effect="plain">简答题</el-tag>
          <el-tag v-else type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="题目详情" prop="content">
        <template #default="scope">
          <div  v-html="scope.row.content"/>
        </template>
      </el-table-column>
      <el-table-column label="选项" prop="options">
        <template #default="scope">
          <div v-for="item in scope.row.options" style="display: flex;align-content: center;justify-items: center">
            <span>{{item.key}}.</span>
            <div  class="optionValue" v-html="item.value" style="display: inline"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="答案" prop="answer" width="150">
      </el-table-column>
      <el-table-column label="解析" prop="explanation">
        <template #default="scope">
          <div  v-html="scope.row.explanation"/>
        </template>
      </el-table-column>
      <el-table-column label="所属题库" prop="bankId" width="150">
        <template #default="scope">
          {{ filterBank(scope.row.bankId) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="150">
      </el-table-column>
      <el-table-column prop="operator" label="操作">
        <template #default="scope">
          <el-button link size="small"  class="question-table__operator"  @click="handleUpdateQuestion(scope.row.id)">
            <template #icon>
              <svg-icon icon-class="update"/>
            </template>
            修改
          </el-button>
          <el-button link size="small"  class="question-table__operator" @click="deleteQuestion(scope.row.id)">
            <template #icon>
              <svg-icon icon-class="delete"/>
            </template>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页按钮-->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model::current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12,24,48,96]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <add-question @refresh="refresh()"/>
  </div>
</template>
<script setup lang="ts">

import {Delete, Refresh, Search} from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {onMounted, ref} from "vue";
import {getBankList} from "@/api/question/bank.ts";
import {deleteQuestionByIdBatch, pageList, removeQuestionById} from "@/api/question/question.ts";
import AddQuestion from "@/components/question/addQuestion.vue";
import {questionStore} from "@/stores/question/questionStore.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import type {RolePageVO} from "@/api/role/types.ts";
const isShowSearch= ref(true)
const isLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
const qtype=ref('')
const bankId=ref(null)
const questionContent=ref('')
const store=questionStore()
const questionType=[
  {label:'单选题',value:'single'},
  {label:'多选题',value:'multiple'},
  {label:'判断题',value:'judgment'},
  {label:'填空题',value:'fill'},
  {label:'简答题',value:'essay'},
]
const selectedIds= ref([] as number[])
const bankList=ref([])
onMounted(()=>{
  initBankList()
  pageQuestionList()
})
const questionList=ref([] as  any[])

const filterBank=(id)=>{
  console.log(bankList.value)
  const tmp= bankList.value.filter(item=>item.key==id)
  return tmp.length>0?tmp[0].value:''
}
const refresh=()=>{
  currentPage.value=1
  pageSize.value=12
  questionContent.value=''
  qtype.value=''
  bankId.value=null
  pageQuestionList()
}
const handleSelectionChange = (val: RolePageVO[]) => {
  selectedIds.value = val.map(item => item.id)
}

const handleUpdateQuestion=(id)=>{
  store.setQuestionId(id)
  store.setQuestionInsertOpen(true)
}
const pageQuestionList=async ()=>{
  isLoading.value=true
  const data={
    page:currentPage.value,
    pageSize:pageSize.value,
    questionType:qtype.value,
    bankId:bankId.value,
    content:questionContent.value
  }
  const res = await pageList(data)
  questionList.value=res.data.records
  total.value=res.data.total
  isLoading.value=false
}
const initBankList=async () => {
  const res = await getBankList()
  bankList.value = res.data
}

/**
 * 批量删除试题
 */
const deleteQuestionBatch=()=>{
  if (selectedIds.value.length === 0) {
    ElMessage.warning("请选择要删除的试题")
    return
  }
  ElMessageBox.confirm(
      '此操作将永久删除选中的试题, 是否继续?',
      '提示', {
        app: undefined,
        components: undefined,
        config: undefined,
        directives: undefined,
        mixins: [],
        provides: undefined,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    const res = await deleteQuestionByIdBatch(selectedIds.value)
    if (res) {
      ElMessage.success("删除成功")
      selectedIds.value=[]
      refresh()
    }
  }).catch(() => {})
}
const deleteQuestion=async (id)=>{
  ElMessageBox.confirm('确定删除该试题吗?', '确认删除', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(async () => {
    const res=await removeQuestionById(id)
    if (res){
      ElMessage.success('删除成功')
      refresh()
    }else {
      ElMessage.success('删除失败')
    }
  }).catch(()=>{

  })

}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  pageQuestionList()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageQuestionList()
}
</script>
<style scoped>
.question-container {
  border: 1px solid var(--el-menu-border-color);
  width: 85.3vw;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.search {
  display: flex;
  font-size: 12px;
}
.search span {
  line-height: 32px;
}
.el-input,.el-select {
  width: 160px;
  height: 32px;
  font-size: 12px;
  margin: 0 8px;
}

.operation {
  width: 100%;
  height: 10%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}

.pagination {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}
:deep(.table-header) {
  color: #000000;
  font-size: 1.5vh;
  text-align: center;
}

.user-table {
  margin: 10px 0 20px 0;
}

.el-table {
  --el-table-row-hover-bg-color: rgb(245, 247, 250);
  --el-table-header-bg-color: rgb(245, 247, 250);
}

:deep(.cell){
  text-align: center;
  margin: 10px 0;
}
:deep(.question-table__operator.disable){
  font-size: 14px;
}
.el-button.is-link{
  --el-button-text-color:rgb(46, 92, 246);
  --el-button-disabled-text-color:rgb(150, 173, 250);
  --el-button-active-text-color:rgb(46, 92, 246);
}

.el-button.is-link:not(.is-disabled):active, .el-button.is-link:not(.is-disabled):hover{
  color:rgb(46, 92, 246);
}
.optionValue{
  text-align: center;
  p{
    margin: 0;
  }
}
</style>